<script>
import { inputChange } from "@/utils/inputChange";

export default {
  name: "dmbform",
  props: {
    modelValue: {
      type: Object,
      required: true,
    },
    formItems: {
      type: Array,
      default: () => [],
    },
    labelWidth: {
      type: String,
      default: "100px",
    },
    itemStyle: {
      type: Object,
      default: () => ({ padding: "10px 40px" }),
    },
    labelPosition: {
      type: String,
      default: "left",
    },
    colLayout: {
      type: Object,
      default: () => ({
        xl: 6, // >1920px 4个
        lg: 8,
        md: 12,
        sm: 24,
        xs: 48,
      }),
    },
  },
  data() {
    return {
      formData: { ...this.modelValue },
    };
  },
  watch: {
    modelValue: {
      handler(newValue) {
        this.formData = newValue;
      },
      deep: true,
      immediate: true
    },
    formData: {
      handler(newValue) {
        console.log(newValue)
        // this.$emit("update", newValue);
      },
      deep: true,
    },
  },

  methods: {
    inputChange,
    nextInput(i) {
      let dimension = i + 1;
      if (dimension >= this.formItems.length) dimension = 0;
      const target = this.$refs["formItem" + dimension][0].$el; // 获取下一个表单项实例对象
      let inner_Dom = target.querySelector(".el-input__inner"); // 查找el-input__inner元素
      if (inner_Dom !== null) inner_Dom.focus(); // 获取焦点
    },
    clear() {
      this.formData = {};
    }
  }
};
</script>

<template>
  <!-- form表单组件 -->
  <div>
    <div class="header">
      <slot name="header" />
    </div>
    <el-form :label-width="labelWidth" :label-position="labelPosition" :model="formData">
      <el-row>
        <template v-for="(item, index) in formItems">
          <el-col v-bind="colLayout" :key="item.prop">
            <!-- 自定义 el-form-item 插槽-->
            <template v-if="item.type === 'itemSlot'">
              <slot :name="item.slotName" v-bind="{ ...item, itemStyle }" />
            </template>

            <el-form-item
              v-else
              :prop="item.field"
              :label="item.label"
              :rules="item.rules"
              :style="itemStyle"
              @keyup.enter.native="nextInput(index)"
            >
              <!-- input文本框 -->
              <template
                v-if="['input', 'password', 'textarea'].includes(item.type)"
              >
                <el-input
                  :ref="'formItem' + index"
                  clearable
                  :placeholder="'请输入' + item.label"
                  :type="item.type"
                  v-bind="item.otherOptions"
                  :show-password="item.type === 'password'"
                  v-model="formData[`${item.field}`]"
                  @change="
                    item.inputType &&
                      inputChange(item.inputType, item, item.field)
                  "
                />
              </template>
              <!-- cascader联级选择器 -->
              <template v-else-if="item.type === 'cascade'">
                <el-cascader
                  :ref="'formItem' + index"
                  :placeholder="'请选择' + item.label"
                  v-bind="item.otherOptions"
                  style="width: 100%"
                  v-model="formData[`${item.field}`]"
                  :options="item.options"
                  :props="{
                    label: item.optionsKey,
                    value: item.optionsValue,
                    children: item.optionsChildren,
                    checkStrictly: true,
                  }"
                  clearable
                >
                </el-cascader>
              </template>
              <!-- select选择器 -->
              <template v-else-if="item.type === 'select'">
                <el-select
                  :ref="'formItem' + index"
                  clearable
                  :placeholder="'请选择' + item.label"
                  v-bind="item.otherOptions"
                  style="width: 100%"
                  v-model="formData[`${item.field}`]"
                >
                  <el-option
                    v-for="option in item.options"
                    :key="option[item.optionsValue || 'value']"
                    :label="option[item.optionsKey || 'label']"
                    :value="option[item.optionsValue || 'value']"
                  >
                  </el-option>
                </el-select>
              </template>

              <!-- 日期选择器 -->
              <template v-else-if="item.type === 'datePicker'">
                <el-date-picker
                  :ref="'formItem' + index"
                  style="width: 100%"
                  v-bind="item.otherOptions"
                  v-model="formData[`${item.field}`]"
                  clearable
                >
                </el-date-picker>
              </template>

              <!-- 日期间隔选择器 -->
              <template v-else-if="item.type === 'daterange'">
                <el-date-picker
                  :ref="'formItem' + index"
                  v-model="formData[`${item.field}`]"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 100%"
                  v-bind="item.otherOptions"
                  clearable
                />
              </template>
              <!-- inputNumber计数器 -->
              <template v-else-if="item.type === 'inputNumber'">
                <el-input-number
                  :ref="'formItem' + index"
                  style="width: 100%"
                  v-bind="item.otherOptions"
                  v-model="formData[`${item.field}`]"
                  clearable
                />
              </template>
              <!-- 单选多选按钮 -->
              <template v-else-if="item.type === 'radio'">
                <el-radio-group
                  :ref="'formItem' + index"
                  v-model="formData[`${item.field}`]"
                  :disabled="item.otherOptions.disabled"
                >
                  <el-radio
                    v-for="option in item.options"
                    :label="option[item.optionsValue || 'value']"
                    :key="option"
                  >
                    {{ option[item.optionsKey || "label"] }}
                  </el-radio>
                </el-radio-group>
              </template>
              <!-- 表单项插槽 -->
              <template v-else-if="item.type === 'slot'">
                <slot :name="item.slotName" v-bind="item"> </slot>
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
    <div class="footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<style lang="scss">
.hy-form {
  padding-top: 22px;
}
.el-form-item__label {
  padding-bottom: 0 !important;
}
</style>
